<template>
  <div style="margin: 15px" class="pay">
    <el-card>
      <div slot="header">
        <span
          style="
            display: flex;
            align-items: center;
            font-size: 18px;
            margin-bottom: 0px;
          "
        >
          <img
            src="@/assets/img/zhichu.svg"
            style="width: 20px; height: 35px; margin-right: 5px"
          />
          支出明细</span
        >
          <div class="xhxBox"></div>
      </div>
    
      <!-- 查询表单 -->
      <div style="margin: 20px 0px 0px -10px; padding-bottom: 15px">
        <el-form :inline="true" label-position="right" label-width="80px">
          <el-form-item label="支出时间">
            <el-date-picker
              v-model="TimeData"
              type="datetimerange"
              align="right"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 250px; margin-right: 30px"
              :default-time="['00:00:00', '23:59:59']"
              value-format="yyyy-MM-dd HH:mm:ss"
            
            >
            </el-date-picker>
            <!-- <el-date-picker
              v-model="TimeData"
              style="width: 200px; margin-right: 30px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              clearable
              :picker-options="pickerOptions0"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker> -->
          </el-form-item>

          <el-form-item label="展业时间" v-show="activeName != '2'">
            <!-- <el-date-picker
              v-model="queryParams.proTime"
              type="datetimerange"
              align="right"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 200px; margin-right: 30px"
              :default-time="['00:00:00', '23:59:59']"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptions0"
            >
            </el-date-picker> -->
            <el-date-picker
              v-model="queryParams.proTime"
              style="width: 250px; margin-right: 30px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              clearable
             
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="项目" v-show="activeName != '2'">
              <el-select placeholder="默认全部" multiple collapse-tags v-model="selectvalue" @change="getSelectDep">
			        <el-checkbox :style="selfstyle" v-model="checkedThing" @change='selectAllThing'>全选</el-checkbox>
			          <el-option v-for="(item, index) in field101Options"
                 :key="index"
                :label="item.proName"
                :value="item.proId"
                style="margin-bottom: 10px">
			          </el-option>
		          </el-select>
          </el-form-item>
          <el-form-item label="结算账户">
            <el-input
              clearable
              v-model="queryParams.field104"
              :maxlength="30"
              placeholder="请输入结算账户"
              style="margin-right: 30px; width: 250px"
            ></el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input
              clearable
              v-model="queryParams.field106"
              :maxlength="30"
              placeholder="请输入昵称"
              style="margin-right: 30px; width: 250px"
            ></el-input>
          </el-form-item>
        </el-form>
        <div style="display: flex; justify-content: center">
          <el-button
            icon="el-icon-refresh"
            style="background: #eeeeee; color: #6396f4; font-weight: bold"
            @click="resetQuery"
            >重置
          </el-button>
          <el-button type="primary" icon="el-icon-search" @click="getList(1)"
            >搜索</el-button
          >
        </div>
      </div>

      <el-divider></el-divider>
      <!-- 数据展示 -->
      <el-card style="height: 150px; margin-top: 10px">
        <div style="display: flex; height: 100%">
          <div class="pay-item">
            <div class="pay-value" style="color: red">
              <span>￥</span>
              <!-- {{ CardData.totalExpend || 0 }} -->
              {{ CardData.totalAmount || 0 }}
            </div>
            <div class="pay-label">总支出(元)</div>
          </div>
          <div class="pay-item">
            <div class="pay-value">
              <span>￥</span>
              {{ CardData.comnissionAmount || 0 }}
            </div>
            <div class="pay-label">佣金支出(元)</div>
          </div>
          <div class="pay-item">
            <div class="pay-value">
              <span>￥</span>
              {{ CardData.profitAmount || 0 }}
            </div>
            <div class="pay-label">分润支出(元)</div>
          </div>
          <div class="pay-item">
            <div class="pay-value value-color">
              <span>￥</span>
              {{ CardData.otherAmount || 0 }}
            </div>
            <div class="pay-label">其它支出(元)</div>
          </div>
        </div>
      </el-card>
      <el-divider></el-divider>


        <!-- 切换表头 -->
      <div class="headDbox">
        <div class="timeNameBox">
          <div
            :class="activeName == '0' ? 'hedaNameBox2' : 'hedaNameBox'"
            @click="handleClick1('0')"
          >
            <img
              v-show="activeName != '0'"
              src="@/assets/img/yongjin3.png"
              style="height: 17px; width: 17px; margin-right: 5px"
            />
            <img
              v-show="activeName == '0'"
              src="@/assets/img/yongjin2.svg"
              style="height: 17px; width: 17px; margin-right: 5px"
            />
             <span style="font-size: 18px;color:#666666" v-show="activeName != '0'">佣金明细</span>
            <span style="font-size: 18px;color:#0084FF" v-show="activeName == '0'">佣金明细</span>
            <!-- 选中下划线 -->
            <div :class="activeName == '0' ? 'xzxhx_box' : 'xzxhx_box2'"></div>
          </div>
          <div
            :class="activeName == '1' ? 'hedaNameBox2' : 'hedaNameBox'"
            @click="handleClick1('1')"
          >
            <img
              v-show="activeName != '1'"
              src="@/assets/img/fenrun2.png"
              style="height: 17px; width: 17px; margin-right: 5px"
            />
            <img
              v-show="activeName == '1'"
              src="@/assets/img/fenrun1.png"
              style="height: 17px; width: 17px; margin-right: 5px"
            />
                       <span style="font-size: 18px;color:#666666" v-show="activeName != '1'">分润明细</span>
            <span style="font-size: 18px;color:#0084FF" v-show="activeName == '1'">分润明细</span>
                <!-- 选中下划线 -->
            <div :class="activeName == '1' ? 'xzxhx_box' : 'xzxhx_box2'"></div>
          </div>
          <div
            :class="activeName == '2' ? 'hedaNameBox2' : 'hedaNameBox'"
            @click="handleClick1('2')"
          >
            <img
              v-show="activeName != '2'"
              src="@/assets/img/other1.png"
              style="height: 17px; width: 17px; margin-right: 5px"
            />
            <img
              v-show="activeName == '2'"
              src="@/assets/img/other.png"
              style="height: 17px; width: 17px; margin-right: 5px"
            />
                 <span style="font-size: 18px;color:#666666" v-show="activeName != '2'">其它明细</span>
            <span style="font-size: 18px;color:#0084FF" v-show="activeName == '2'">其它明细</span>
                <!-- 选中下划线 -->
            <div :class="activeName == '2' ? 'xzxhx_box' : 'xzxhx_box2'"></div>
          </div>
         
        </div>
        <div class="ExportButtonBox">
          <el-button
            icon="el-icon-upload2"
            @click="CommissionExport"
            style=" background: #f5f5f5"
            >导出</el-button
          >
        </div>
      </div>

      <!-- 佣金支出 -->
         <el-table  :header-cell-style="{
              background: '#FAFAFA',
              color: 'black',
              'font-size': 15 + 'px',
              'text-align': 'center',
            }" :data="roleList" id="dataTable" v-show="activeName == '0'">
              <el-table-column
                label="支出日期"
                align="center"
                prop="createTime"
              />
              <el-table-column label="展业时间" align="center" prop="workTime">
                <template slot-scope="scope">
                  <span>{{ scope.row.workTime || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column label="项目" prop="projectName" align="center">
              </el-table-column>
              <el-table-column
                label="结算类型"
                prop="settleName"
                align="center"
              />
               <el-table-column
                label="结算账户"
                align="center"
                prop="toUserName"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.toUserName || "暂无" }}</span>
                </template>
              </el-table-column>
               <el-table-column label="昵称" align="center" prop="toNickName">
                <template slot-scope="scope">
                  <span>
                    <el-button
                      type="text"
                      @click="CheckSuperior(scope.row)"
                      style="height: auto; margin: 0px; padding: 0px;text-decoration:underline"
                      >{{ scope.row.toNickName }}</el-button
                    ></span
                  >
                </template>
              </el-table-column>
                 <el-table-column
                label="每单佣金/元"
                align="center"
                prop="price"
              />

                <el-table-column label="总数" prop="orderCount" align="center">
              </el-table-column>
              <!-- <el-table-column
                label="出资方"
                prop="fromUserName"
                align="center"
              /> -->
             
              <el-table-column label="支出金额" align="center" prop="amount">
                <template slot-scope="scope">
                  <span style="color: Green">{{ scope.row.amount }}</span>
                </template>
              </el-table-column>
              <el-table-column label="备注" align="center" prop="notes">
                <template slot-scope="scope">
                  <span>{{ scope.row.notes || "暂无" }}</span>
                </template>
              </el-table-column>
            </el-table>


            <!-- 分润支出 -->
                   <el-table  :header-cell-style="{
              background: '#FAFAFA',
              color: 'black',
              'font-size': 15 + 'px',
              'text-align': 'center',
            }" :data="roleList" id="dataTable" v-show="activeName == '1'">
              <el-table-column
                label="支出日期"
                align="center"
                prop="createTime"
              />
              <el-table-column label="展业时间" align="center" prop="workTime">
                <template slot-scope="scope">
                  <span>{{ scope.row.workTime || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column label="项目" prop="projectName" align="center">
              </el-table-column>

              <!-- <el-table-column
                label="每单佣金/元"
                align="center"
                prop="price"
              /> -->
              <el-table-column
                label="结算类型"
                prop="settleName"
                align="center"
              />

              <!-- <el-table-column label="总数" prop="orderCount" align="center">
              </el-table-column> -->
              <!-- <el-table-column
                label="出资方"
                prop="fromUserName"
                align="center"
              /> -->
              <el-table-column
                label="结算账户"
                align="center"
                prop="toUserName"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.toUserName || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column label="昵称" align="center" prop="toNickName">
                <template slot-scope="scope">
                  <span>
                    <el-button
                      type="text"
                      @click="CheckSuperior(scope.row)"
                      style="height: auto; margin: 0px; padding: 0px;text-decoration:underline"
                      >{{ scope.row.toNickName }}</el-button
                    ></span
                  >
                </template>
              </el-table-column>
              <el-table-column label="支出金额" align="center" prop="amount">
                <template slot-scope="scope">
                  <span style="color: Green">{{ scope.row.amount }}</span>
                </template>
              </el-table-column>
              <el-table-column label="备注" align="center" prop="notes">
                <template slot-scope="scope">
                  <span>{{ scope.row.notes || "暂无" }}</span>
                </template>
              </el-table-column>
            </el-table>

            <!-- 其它支出 -->
               <el-table  :header-cell-style="{
              background: '#FAFAFA',
              color: 'black',
              'font-size': 15 + 'px',
              'text-align': 'center',
            }" :data="roleList" id="dataTable" v-show="activeName == '2'">
              <el-table-column
                label="支出日期"
                align="center"
                prop="createTime"
              />

              <!-- <el-table-column label="项目" prop="projectName" align="center"/> -->
               
              <el-table-column
                label="结算账户"
                align="center"
                prop="toUserName"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.toUserName || "暂无" }}</span>
                </template>
              </el-table-column>
              <el-table-column label="昵称" align="center" prop="toNickName">
                <template slot-scope="scope">
                  <span>
                    <el-button
                      type="text"
                      @click="CheckSuperior(scope.row)"
                      style="height: auto; margin: 0px; padding: 0px;text-decoration:underline"
                      >{{ scope.row.toNickName }}</el-button
                    ></span
                  >
                </template>
              </el-table-column>
              <el-table-column label="支出金额" align="center" prop="amount">
                <template slot-scope="scope">
                  <span style="color: Green">{{ scope.row.amount }}</span>
                </template>
              </el-table-column>
              <el-table-column label="备注" align="center" prop="notes">
                <template slot-scope="scope">
                  <span>{{ scope.row.notes || "暂无" }}</span>
                </template>
              </el-table-column>
            </el-table>



    
      <pagination
        :total="total"
        style="margin: 40px 0px"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
    <!-- 查看上级 -->
    <ViewSuperior ref="superior" :IdData="IdData" />
  </div>
</template>

<script>
import { getInfo } from "@/api/login.js";
import ViewSuperior from "@/views/components/ViewSuperior.vue";
import {
  selectCapPoolAccountRecordListPage,
  getProNameList,
  capPoolAccountRecordStatistics,
  selectCapPoolAccountRecordList,
  exportXls,
  selectTenantExcel,
  tenantProjectList,
} from "@/api/finance/index.js";

import { getBasisList } from "@/api/projectManagement/index.js";
export default {
  name: "Pay",
  data() {
    return {

      checkedThing: false,
				       selfstyle: {
				          textAlign: "right",
				          width: "100%",
				          paddingRight: "10px",
				        },
      selectvalue:[],
      //时间选择器的快捷选择
       pickerOptions: {
          disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
             disabledDate(time) {
          return time.getTime() > Date.now();
        },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
             disabledDate(time) {
          return time.getTime() > Date.now();
        },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
                disabledDate(time) {
          return time.getTime() > Date.now();
        },
          },
        ],
      },

      //查看上级组件参数
      IdData: "",
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6;
        },
      },
      // 切换佣金收入和分润收入
      activeName: "0",

      // ..卡片总数据
      CardData: {},

      // 用户ID
      userId: 0,
      // 类型搜索
      field101Options: [],

      // 分页总条数
      total: 0,
      TimeData: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // 搜索类型
        amountType:undefined,
        // 时间
        dateRange: [],
        //出资方
        fromUserName: "",
        field106: "",
        field104: "",
        proTime: [], //展业时间
      },
      roleList: [
        // {time:'2'},
      ],
    };
  },
  async mounted() {
      			this.defaultDate()


    this.TimeData[0] =
      this.moment().format("YYYY") +
      "-" +
      this.moment().format("MM") +
      "-" +
      "01" +
      " " +
      "00:00:00";
    this.TimeData[1] = this.moment().format("YYYY-MM-DD") + " " + "23:59:59";
   


    const res = await getInfo();
    console.log(res, "用户信息");
    if (res.code == 200) {
      this.userId = res.user.userId;
      this.getList();
    }
  },
  methods: {
    getSelectDep(department) {
			        if (department.length === this.field101Options.length) {
			          this.checkedThing = true
			        } else {
			          this.checkedThing = false
			        }
              // console.log(this.selectv)
			      },
			      selectAllThing() {
			        this.selectvalue = []
			        if (this.checkedThing) {
			          this.field101Options.map((item) => {
			            this.selectvalue.push(item.proId)
                  // console.log(item.)
			          })
			        } else {
			          this.selectvalue = []
			        }
			},
    //进入页面获取当前月的第一天到当前日期
    defaultDate() {
				//获取新的时间
				let date = new Date()
				//获取当前时间的年份转为字符串
				let year = date.getFullYear().toString()
				//获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
				let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1)
					.toString()
				//获取天，判断是否小于10，如果是在字符串前面拼接'0'
				let da = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate().toString()
				//字符串拼接，开始时间，结束时间
				let end = year + '-' + month + '-' + da //当天
				let beg = year + '-' + month + '-01' //当月第一天
				this.TimeData = [beg, end] //将值设置给插件绑定的数据
			},


    // 点击查看上级按钮
    async CheckSuperior(row) {
      //  console.log(row,'123');
      this.IdData = row.toUserId;
      this.$refs.superior.gitData();
    },
    /** 重置按钮操作 */
    resetQuery() {
      console.log(this.queryParams, "重置按钮");
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        // 搜索类型
        amountType: "",

        //出资方
        fromUserName: "",
        field106: "",
        field104: "",
        proTime: [], //展业时间
      };
      this.selectvalue =[]
      this.TimeData = [];
      this.TimeData[0] =
        this.moment().format("YYYY") +
        "-" +
        this.moment().format("MM") +
        "-" +
        "01" +
        " " +
        "00:00:00";
      this.TimeData[1] = this.moment().format("YYYY-MM-DD") + " " + "23:59:59";

      this.getList(1);
    },
    // 获取数据列表
    async getList(row) {
      // console.log(this.queryParams.proTime, "切换的值");
      if (!this.queryParams.proTime) {
        this.queryParams.proTime = [];
      }
      if (!this.TimeData) {
        this.TimeData = [];
      }
      // console.log(this.queryParams, "搜索的参数");
      let qh = "";
      if (this.activeName == "0") {
        qh = "COMMISSION";
      } else if (this.activeName == "1") {
        qh = "PROFIT";
      } else {
        qh = "OTHER";
      }
      let param = {};

      if(this.selectvalue.length==1){
        let projectId = this.selectvalue[0]
         param = {
        capitalType: qh, //OTHER其它   PROFIT分润  FEE是手续费  COMMISSION佣金
        tenantId: this.userId, //租户ID
        fromUserId: this.userId, //为了以后好区分，和租户ID传一样的，反正传租户ID就对了
        pageSize: this.queryParams.pageSize,
        pageNum: this.queryParams.pageNum,
        fromUserName: this.queryParams.fromUserName, //出资方
        toNickName: this.queryParams.field106, //用户昵称
        startTime: this.TimeData[0], //创建时间
        endTime: this.TimeData[1],
        toUserName: this.queryParams.field104, //用户账户
        projectId: projectId, //项目
        workStartTime: this.queryParams.proTime[0], //展业时间开始
        workEndTime: this.queryParams.proTime[1], //展业时间结束
      };
      }else{
        let projectIds = this.selectvalue
        param = {
        capitalType: qh, //OTHER其它   PROFIT分润  FEE是手续费  COMMISSION佣金
        tenantId: this.userId, //租户ID
        fromUserId: this.userId, //为了以后好区分，和租户ID传一样的，反正传租户ID就对了
        pageSize: this.queryParams.pageSize,
        pageNum: this.queryParams.pageNum,
        fromUserName: this.queryParams.fromUserName, //出资方
        toNickName: this.queryParams.field106, //用户昵称
        startTime: this.TimeData[0], //创建时间
        endTime: this.TimeData[1],
        toUserName: this.queryParams.field104, //用户账户
        projectIds: projectIds, //项目
        workStartTime: this.queryParams.proTime[0], //展业时间开始
        workEndTime: this.queryParams.proTime[1], //展业时间结束
      }
      }
     
      const data = await selectCapPoolAccountRecordListPage(param);
      if (data.code == 200) {
        this.total = data.data.total;
        this.roleList = data.data.list;
        // this.roleList = data.data.list.map((item) => {
        //   if (item.otherType == "3") {
        //     item.otherType = "平台增加";
        //   } else if (item.otherType == "4") {
        //     item.otherType = "平台减少";
        //   }
        //   return item;
        // });
      } else {
        this.$message.error(data.msg);
      };
        let param2 ={}
        if(this.selectvalue.length == 0){
            param2 = {
        tenantId: this.userId, //租户ID
        fromUserId: this.userId, //为了以后好区分，和租户ID传一样的，反正传租户ID就对了
        pageSize: this.queryParams.pageSize,
        pageNum: this.queryParams.pageNum,
        fromUserName: this.queryParams.fromUserName, //出资方
        toNickName: this.queryParams.field106, //用户昵称
        startTime: this.TimeData[0], //创建时间
        endTime: this.TimeData[1],
        toUserName: this.queryParams.field104, //用户账户
        projectId: this.selectvalue[0], //项目
        workStartTime: this.queryParams.proTime[0], //展业时间开始
        workEndTime: this.queryParams.proTime[1], //展业时间结束
      };
        }else{
            param2 = {
        tenantId: this.userId, //租户ID
        fromUserId: this.userId, //为了以后好区分，和租户ID传一样的，反正传租户ID就对了
        pageSize: this.queryParams.pageSize,
        pageNum: this.queryParams.pageNum,
        fromUserName: this.queryParams.fromUserName, //出资方
        toNickName: this.queryParams.field106, //用户昵称
        startTime: this.TimeData[0], //创建时间
        endTime: this.TimeData[1],
        toUserName: this.queryParams.field104, //用户账户
        projectIds: this.selectvalue, //项目
        workStartTime: this.queryParams.proTime[0], //展业时间开始
        workEndTime: this.queryParams.proTime[1], //展业时间结束
      };
        }
         

      // 获取卡片
      const card = await capPoolAccountRecordStatistics(param2);
      if (card.code == 200) {
        this.CardData = card.data;
      } else {
        this.$message.error(card.msg);
      }

      console.log(card, "获取卡片");
      //  佣金支出     totalCommission: 0
      // totalExpend: 0 总支出
      // totalIncome: null
      // totalOther: 0 totalOther
      // totalProfit: 0 分润支出
      //如果切换其它列表，就把搜索类型更换掉

      // 获取搜索下拉框  其实就是获取项目管理页面的列表
      // const search = await getProNameList();
      const search = await tenantProjectList();
      console.log(search, "搜索下拉框"); //proId是项目id
      if (search.code == 200) {
        search.data.forEach(async (item) => {
          item.value = item.proName;
          item.label = item.proName;
          const getList = await getBasisList({ projectId: item.proId });
          if (getList.code == 200) {
            console.log(getList, "获取值1111");
            if (getList.data.length > 0) {
              getList.data.forEach((item2) => {
                item2.value = item2.id;
                item2.label = item2.settleName;
                if (item.proId == item2.projectId) {
                  item.children = getList.data;
                }
              });
            }
          }
        });

        console.log(search.data, "获取值222");
        this.$nextTick(() => {
          search.data.push({proName:"全部",proId:undefined});

         
          this.field101Options = search.data;
          // this.field101Options[0].proName = '全部';
          // this.queryParams.amountType='全部'
        });
      };
      if(row){
         this.$message({
          message: '搜索中...',
          type: 'success'
        });
      }
    },
    //导出函数
    async CommissionExport() {
      let qh = "";
      let name='';
      if (this.activeName == "0") {
        qh = "COMMISSION";
        name='佣金收入'
      } else if (this.activeName == "1") {
        qh = "PROFIT";
         name='分润收入'
      } else {
        qh = "OTHER";
         name='其它收入'
      }
      if (!this.queryParams.proTime) {
        this.queryParams.proTime = [];
      }
      if (!this.TimeData) {
        this.TimeData = [];
      }
      let param ={}
      if(this.selectvalue.length==1){
        let projectId = this.selectvalue[0]
         param = {
        capitalType: qh, //OTHER其它   PROFIT分润  FEE是手续费  COMMISSION佣金
        tenantId: this.userId, //租户ID
        fromUserId: this.userId, //为了以后好区分，和租户ID传一样的，反正传租户ID就对了
        pageSize: this.queryParams.pageSize,
        pageNum: this.queryParams.pageNum,
        fromUserName: this.queryParams.fromUserName, //出资方
        toNickName: this.queryParams.field106, //用户昵称
        startTime: this.TimeData[0], //创建时间
        endTime: this.TimeData[1],
        toUserName: this.queryParams.field104, //用户账户
        projectId: projectId, //项目
        workStartTime: this.queryParams.proTime[0], //展业时间开始
        workEndTime: this.queryParams.proTime[1], //展业时间结束
      };
      }else{
        let projectIds = this.selectvalue
        param = {
        capitalType: qh, //OTHER其它   PROFIT分润  FEE是手续费  COMMISSION佣金
        tenantId: this.userId, //租户ID
        fromUserId: this.userId, //为了以后好区分，和租户ID传一样的，反正传租户ID就对了
        pageSize: this.queryParams.pageSize,
        pageNum: this.queryParams.pageNum,
        fromUserName: this.queryParams.fromUserName, //出资方
        toNickName: this.queryParams.field106, //用户昵称
        startTime: this.TimeData[0], //创建时间
        endTime: this.TimeData[1],
        toUserName: this.queryParams.field104, //用户账户
        projectIds: projectIds, //项目
        workStartTime: this.queryParams.proTime[0], //展业时间开始
        workEndTime: this.queryParams.proTime[1], //展业时间结束
      }
      }
      const res = await selectTenantExcel(param);
      console.log(res, "文件流");
      if (!res) return; //
      const excelTitle = `${name}.xlsx`;
      //触发另一个函数
      this.readFileDownload(res, excelTitle);
    },
    //导出函数2
    readFileDownload(data, msg) {
      var res = data;
      if (
        res.type === "application/json" ||
        res.type === "application/json;charset=UTF-8"
      ) {
        // 失败的时候，注意ie兼容问题
        let fileReader = new FileReader();
        fileReader.onload = function (event) {
          let jsonData = JSON.parse(this.result); // this.result是根据event，读取文件后打印的
          console.log(jsonData, "...............");
          if (jsonData.data === null && jsonData.code === 1) {
            Message({
              message: jsonData.msg || "Error",
              type: "error",
              duration: 5 * 1000,
            });
          }
        };
        fileReader.readAsText(res);
      }
      if (
        res.type === "application/octet-stream" ||
        res.type === "application/vnd.ms-excel" ||
        res.type === "application/msexcel" ||
        res.type === "application/vnd.ms-excel;charset=UTF-8"
      ) {
        console.log("success..."); // 成功，注意ie兼容问题

        const blob = new Blob([res], {
          type: "application/vnd.ms-excel;charset=utf-8",
          // type: "application/msexcel;charset=utf-8",
        });

        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          window.navigator.msSaveOrOpenBlob(blob, msg);
        } else {
          console.log(blob);
          const url = window.URL.createObjectURL(blob);
          console.log(url);
          const aLink = document.createElement("a");
          aLink.style.display = "none";
          aLink.href = url;
          aLink.setAttribute("download", msg);
          document.body.appendChild(aLink);
          aLink.click();
          document.body.removeChild(aLink);
          window.URL.revokeObjectURL(url);
        }
      }
    },
    //导出函数
    ProfitExport() {},
    //导出函数
    otherExport() {},
    handleClick1(tab, event) {
      this.activeName=tab;
      // console.log(tab, event, "2222");
      //如果切换其它就把搜索类型更改掉
      this.getList();
    },
  },
  components: { ViewSuperior },
  created:{
    initDatePicker(){
      this.TimeData = [];
      this.TimeData[0] =
        this.moment().format("YYYY") +
        "-" +
        this.moment().format("MM") +
        "-" +
        "01" +
        " " +
        "00:00:00";
      this.TimeData[1] = this.moment().format("YYYY-MM-DD") + " " + "23:59:59";
    }
  }
};
</script>

<style scoped lang="scss">
.headDbox{
  //  border: 1px red solid;
  display: flex;
justify-content:space-between;
  .timeNameBox {
  display: flex;
  .xzxhx_box{
     border-bottom: 2px rgb(0, 132, 255) solid;
     height: 5px;
     width: 80%;
     margin: 0 auto;
     padding-bottom: 10px;
  }
  .xzxhx_box2{
     border-bottom: 2px rgba(0, 132, 255,0) solid;
     height: 5px;
     width: 80%;
     margin: 0 auto;
     padding-bottom: 10px;
  }
  .hedaNameBox {
    // border: 1px red solid;
    margin-right: 40px;
    margin-bottom: 20px;
    cursor: pointer;
  }
  .hedaNameBox2 {
    // border-bottom: 2px rgb(0, 132, 255) solid;
    // // border:1px red solid;
    // padding-bottom: 10px;
    margin-right: 40px;
    margin-bottom: 20px;
    cursor: pointer;
  }
  
}
.ExportButtonBox{
    //  border: 1px red solid;
    // padding-bottom: 20px;
    // margin-bottom: 20px;
  }
}
.pay .pay-item:not(:last-child) {
  border-right: 1px solid #f0f0f0;
}
.xhxBox {
  border-top: 1px #eee solid;
  height: 5px;
  margin-top: 12px;
  /* border: 1px red solid; */
}
.exportButton {
  border-top: 1px #eee solid;
  display: flex;
  justify-content: flex-end;
}
.el-form-item__label {
  font-weight: 500;
}
</style>
<style>
.pay .el-date-editor .el-range-separator {
  width: 15%;
}

.pay .el-card__body {
  height: 100%;
}

.pay .pay-item {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}



.pay .pay-item .pay-value {
  font-size: 24px;
  font-weight: bold;
}

.pay .pay-item .pay-value span {
  font-size: 10px;
  margin-right: -5px;
}

.pay .pay-item .value-color {
  color: #3a77f6;
}

.pay .pay-item .pay-label {
  font-size: 11px;
  margin-top: 10px;
}

.pay .el-divider--horizontal {
  background: #f0f0f0;
}

.pay .el-card__header {
  margin: 0 20px;
  padding-left: 0px;
  border:none;
}

.pay .el-tabs__nav-wrap::after {
  height: 0;
}
</style>
